<template>
    <div class="contract-page">
      <!-- 搜索框模块 -->
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-form :model="queryParams" label-width="100px" v-show="showSearch">
              <el-row :gutter="20">

                <el-col :span="5">
                  <el-form-item label="模板名称" id="index">
                    <el-input
                      placeholder="请输入模板名称"
                      clearable
                      v-model="queryParams.contractTemplateName"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="14">
                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-col>

              </el-row>
            </el-form>
          </el-col>
        </el-row>

        <el-row style="margin-bottom: 10px">
          <el-col :span="5">
            <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
          </el-col>

          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>

        <el-table
          v-loading="loading"
          :show-overflow-tooltip="true"
          :data="tableData"
          stripe
          border
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
          max-height="500"
        >
          <el-table-column
            prop="name"
            width="200"
            label="模板名称"
          ></el-table-column>
          <el-table-column prop="templateInfo" label="模板说明" width="900">
            <template v-slot:default="scope">
                <span>{{ scope.row.illustration }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template v-slot:default="scope">
                <el-tag :type="scope.row.status === '1' ? '':'danger'">
                    <span> {{
                        contract_status.find((item) => item.value == scope.row.status)
                          ? contract_status.find(
                            (item) => item.value == scope.row.status
                          ).label
                          : ""
                      }}</span>
                </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            prop="creator"
            label="操作人"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="操作时间"
          ></el-table-column>

          <el-table-column label="操作">
            <template v-slot:default="scope">
              <el-button
                icon="Edit"
                type="primary"
                link
                @click="handleEdit(scope.row)"
                >修改</el-button
              >
              <el-button
                icon="Delete"
                type="danger"
                link
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 全局分页 -->
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.limit"
          @pagination="getList"
        ></pagination>
      </el-card>

    </div>
  </template>

<script setup>
  import {
    getContractTemplateData,
    deleteContractTemplate
  } from "../../../api/contractTemplate/index"
  import {
    ref,
    reactive
  } from "vue"
  import { useRouter } from "vue-router"
  import { ElMessage, ElMessageBox } from "element-plus"

  const { proxy } = getCurrentInstance();

  const router = useRouter()

  // 字典-合同状态-开启停用
  const { contract_status } = proxy.useDict("contract_status");

  const showSearch = ref(true);
  const loading = ref(true);

  // 搜索表单

  // 分页
  const total = ref(0);

  // 表格
  const tableData = ref([]);
  const data = reactive({

    queryParams: {
      page: 1,
      limit: 10,
      contractTemplateName: "",
    },

  });
  const { queryParams } = toRefs(data);

  // 拿表格数据
  const getList = () => {
    loading.value = true;
    // 整理查询参数

    getContractTemplateData(queryParams.value).then((res) => {
        tableData.value = res.page.list;
        loading.value = false;
        total.value = res.page.totalCount;

      }).catch((error) => {});
  };

  // 点击搜索按钮
  const handleQuery = () => {
    getList();
  };

  // 点击重置按钮
  const resetQuery = () => {
    queryParams.value={
      page: 1,
        limit: 10,
        contractTemplateName: "",
    },
    getList();
  };

  // 点击新增按钮
  const handleAdd = () => {
    router.push(
      {
        name:"contract-info",
      }

    )
  };

  // 点击修改
  const handleEdit = (data) => {
    // 跳转页面到info页面
    router.push({
      name:"contract-info",
      params:{
        id:data.id,
        content:data.content,
        status:data.status,
        illustration:data.illustration,
        name:data.name
      }

    })

  };

  // 点击删除
  const handleDelete = (data) => {
    console.log(data, "<<<=== 点击删除-data");
    ElMessageBox.confirm(`是否确定删除${data.name}`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        deleteContractTemplate([data.id]).then((res) => {
            getList();
            ElMessage({
              type: "success",
              message: "删除成功",
            });
          }).catch((error) => {
            console.log(error, "<<<=== error");
            ElMessage.error(error.msg)
          });
      }).catch((error) => {
        ElMessage({
          type: "warning",
          message: "取消删除",
        });
      });
  };

  // 写方法处理指标单位的显示-目前后端返回的的数据有问题

  getList();
  </script>

  <style lang="scss" scoped>
  .contract-page {
    padding: 20px;
  }

  :deep(.el-form-item[id="index"] .el-form-item__label) {
    // border:1px solid orange;
    width: 70px !important;
  }


</style>

